<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <title>小师爱学习</title>
    <link rel="shortcur icon" type="image/x-icon"
          href="http://120.46.82.82:8080/code/static/foreground/images/logomin.png"/>
    <link rel="stylesheet" href="http://120.46.82.82:8080/code/static/foreground/layui/css/layui.css"/>
    <link rel="stylesheet" href="http://120.46.82.82:8080/code/static/foreground/css/global.css"/>

    <script type="text/javascript" src="http://120.46.82.82:8080/code/static/js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="http://120.46.82.82:8080/code/static/layui/layui.js"></script>
    <script type="text/javascript" src="http://120.46.82.82:8080/code/static/layui/layui.all.js"></script>


    <script type="text/javascript" src="http://120.46.82.82:8080/code/static/js/index.js"></script>

</head>

<body>
<div th:replace="common/header::#h"></div>
<div class="fly-panel fly-column" style="height: auto">
    <div class="layui-container">
        <ul class="layui-clear" th:utext="${actTypeStr}"></ul>
    </div>
</div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="fly-panel detail-body">
                <h1 th:text="${article.name}"></h1>
                <div class="fly-detail-info">
                    <span th:if="${article.hot == true}" class="layui-bg-red layui-badge">热门</span>
                    <span class="layui-badge layui-bg-green fly-detail-column"
                          th:text="${#dates.format(article.publishDate,'yyyy-mm-dd')}"></span>
                    <apan class="layui-badge layui-bg-black" th:text="${article.arcType.arcTypeName}"></apan>
                    <span th:if="${article.free == true}" class="layui-bg-orange layui-badge">免费资源</span>
                    <span class="fly-list-nums"><i class="iconfont" title="点击">&#xe60b;</i><span
                            th:text="${article.click}"></span></span>
                </div>

                <div class="detail-about">
                    <a class="fly-avatar">
                        <img th:src="'http://120.46.82.82:8080/code/static/img/'+${article.user.headPortrait}"
                             th:alt="${article.user.nickname}">
                    </a>
                    <div th:if="${article.useful == true}" style="float: right;" class="layui-hide-xs">
                        <button class="layui-btn layui-btn-radius layui-btn-warm" onclick="download()">&nbsp;&nbsp;立即下载&nbsp;&nbsp;</button>
                        <button class="layui-btn layui-btn-radius " style="background-color: red"
                                onclick="vipDownload()">&nbsp;&nbsp;VIP免积分下载&nbsp;&nbsp;
                        </button>
                    </div>
                    <div th:if="${article.useful == false}" style="float: right;" class="layui-hide-xs">
                        <span><font color="red">该资源链接已经失效，请联系作者更改</font></span>
                    </div>

                    <div class="fly-detail-user">
                        <a class="fly-link">
                            <cite th:text="${article.user.nickname}">作者</cite>
                            <i th:if="${article.user.vip == true}" class="iconfont icon-renzheng" title="会员认证"></i>
                            <i th:if="${article.user.vip == true}" class="layui-badge fly-badge-vip"
                               th:text="'VIP'+${article.user.vipGrade}">VIP</i>
                        </a>
                        <span th:text="${#dates.format(article.publishDate,'yyyy-mm-dd')}">发布时间</span>
                        <div class="detail-hits">
                            <span style="padding-right: 10px;color: #FF7200"
                                  th:text="'所需：' + ${article.points}+ '积分'"></span>
                        </div>
                    </div>

                    <div class="detail-body layui-layer-photos" th:utext="${article.content}">
                    </div>
                </div>
            </div>

            <div class="fly-panel detail-box" id="flyReply">
                <fieldset class="layui-field-title layui-elem-field" style="text-align: center">
                    <legend>评论信息</legend>
                </fieldset>
                <div class="layui-form layui-form-pane">
                    <form mothod="post">
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block">
                                <textarea id="L_content" placeholder="欢迎高质量的评论，留下您宝贵的意见吧" name="content"
                                          class="layui-textarea fly-edit"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" lay-filter="addContent" lay-submit>提交评论</button>
                            </div>

                        </div>
                    </form>
                </div>

                <ul class="jieda" id="jieda"></ul>
            </div>

        </div>
    </div>
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['flow', 'layedit', 'form'], function () {
        var flow = layui.flow, layedit = layui.layedit, form = layui.form, $ = layui.jquery;
        // 构建一个自定义编辑器
        var index = layedit.build("L_content", {
            height: 150, // 设置编辑器高度
            tool: ['strong', //加粗
                'italic', //斜体
                'underline', //下划线
                'del', //删除线

                '|',//分割线
                'left', //左对齐
                'center', //居中对齐
                'right', //右对齐
                'link', //超链接
                'unlink', //清除链接
                'face', // 表情
                // 'help' //帮助
            ],

        });
        form.on("submit(addContent)", function (data) {
            // 判断是否已经登录
            if ([[${session.currentUser}]] == null) {
                layer.msg("抱歉您还没有登录，需要登录之后才能评论");
                return false;
            }
            // 判断时候下载过资源
            $.post("http://120.46.82.82:8080/code/user/userDownloadExist", {"articleId": [[${article.articleId}]]}, function (result) {
                if (result) {
                    var content = $.trim(layedit.getText(index));
                    if (content === '') {
                        layer.msg("请您留下宝贵的意见！！！");
                        return false;
                    }
                    $.post("http://120.46.82.82:8080/code/comment/add", {
                        "article.articleId": [[${article.articleId}]],
                        "content": content
                    }, function (result) {
                        if (result) {
                            layer.msg("评论成功，审核通过后显示", {
                                icon: 1,
                                time: 1000,
                            }, function () {
                                layedit.setContent(index, '');
                            });
                        }
                    }, 'json');
                } else {
                    layer.msg("抱歉您还没有下载过资源，需要下载之后才能评论");
                    return false;
                }

            }, "json");
            return false;  // 这里不会跳转
        });



        //显示评论
        flow.load({
            elem:'#jieda'       //流加载容器
            ,done:function (page,next) {        //执行下一页的回调
                setTimeout(function () {
                        $.post("http://120.46.82.82:8080/code/comment/list",{"page":page,"article.articleId":[[${article.articleId}]]},function (res) {
                            //执行下一页渲染，第二个参数为：满足“加载更多”的条件，即后面仍有分页
                            //res.total为Ajax的返回的总页数，只有当前页小于总页数的情况下，才会出现加载更多
                            next(res.data,page<res.total);
                        },"json");
                    },500
                );
            }
        });
    });


    // 下载
    function download() {
        // 判断是否已经登录
        if ([[${session.currentUser}]] == null) {
            layer.msg("抱歉您还没有登录，登录后再获取资源！")
            return false;
        }
        // 判断是否下载  需要下载
        $.post("http://120.46.82.82:8080/code/user/userDownloadExist", {"articleId": [[${article.articleId}]]}, function (result) {

            if (result) {//已经下载过了
                layer.msg("该资源您已经下载过了，再次下载将不再扣除您的积分，您确定要下载吗?", {
                    title: "下载提示",
                    btn: ["确定", "取消"]
                }, function () {
                    layer.closeAll("dialog");
                    layer.open({
                        type: 2,
                        title: "资源下载页面",
                        shadeClose: true, // 控制遮罩
                        shade: 0.8,
                        area: ["480px", "200px"],
                        content: 'http://120.46.82.82:8080/code/user/toDownloadPage/[[${article.articleId}]]'
                    })
                }, function () {

                })
            } else {
                // layer.msg("没下载过")
                // 是否是免费资源
                $.post("http://120.46.82.82:8080/code/article/isFree", {"articleId": [[${article.articleId}]]}, function (result) {
                    if (result) {
                        // layer.msg("免费资源");
                        layer.confirm("确定要<font color='red'>免费</font>下载这个资源吗？", {
                            title: "下载提示",
                            btn: ["确定", "取消"],
                        }, function () {
                            layer.closeAll("dialog");
                            layer.open({
                                type: 2,
                                title: "资源下载页面",
                                shadeClose: true, // 控制遮罩
                                shade: 0.8,
                                area: ["480px", "200px"],
                                content: 'http://120.46.82.82:8080/code/user/toDownloadPage/[[${article.articleId}]]'
                            })
                        }, function () {

                        });
                    } else {
                        // layer.msg("付费资源")
                        // 判断是否有足够的积分
                        $.post("http://120.46.82.82:8080/code/user/userDownloadEnough", {"points": [[${article.points}]]}, function (result) {
                            if (result) {
                                layer.confirm("该资源需要<font color='red'> [[${article.points}]] </font>积分，你确定要下载这个资源吗？", {
                                    title: "下载提示",
                                    btn: ["确定", "取消"],
                                }, function () {
                                    layer.closeAll("dialog");
                                    layer.open({
                                        type: 2,
                                        title: "资源下载页面",
                                        shadeClose: true, // 控制遮罩
                                        shade: 0.8,
                                        area: ["480px", "200px"],
                                        content: 'http://120.46.82.82:8080/code/user/toDownloadPage/[[${article.articleId}]]'
                                    })
                                }, function () {

                                });
                            } else {
                                layer.msg("积分不够，不能下载该资源")

                            }
                        })
                    }
                })
            }
        });
    }

    // vip 下载资源

    function vipDownload() {
        // 判断是否已经登录
        if ([[${session.currentUser}]] == null) {
            layer.msg("抱歉您还没有登录，登录后再获取资源！")
            return;
        }
        // 判断用户是否是vip
        $.post("http://120.46.82.82:8080/code/user/isVip", {}, function (result) {
            if (result) {
                // layer.msg("尊贵的VIP，您好")

                // 判断是否下载  需要下载
                $.post("http://120.46.82.82:8080/code/user/userDownloadExist", {"articleId": [[${article.articleId}]]}, function (result) {

                    if (result) {//已经下载过了
                        layer.msg("该资源您已经下载过了，再次下载将不再扣除您的积分，您确定要下载吗?", {
                            title: "下载提示",
                            btn: ["确定", "取消"]
                        }, function () {
                            layer.closeAll("dialog");
                            layer.open({
                                type: 2,
                                title: "资源下载页面",
                                shadeClose: true, // 控制遮罩
                                shade: 0.8,
                                area: ["480px", "200px"],
                                content: 'http://120.46.82.82:8080/code/user/toVIPDownloadPage/[[${article.articleId}]]'
                            })
                        }, function () {

                        })
                    } else {
                        // layer.msg("没下载过")
                        layer.confirm("确定要下载这个资源吗？", {
                            title: "下载提示",
                            btn: ["确定", "取消"],
                        }, function () {
                            layer.closeAll("dialog");
                            layer.open({
                                type: 2,
                                title: "资源下载页面",
                                shadeClose: true, // 控制遮罩
                                shade: 0.8,
                                area: ["480px", "200px"],
                                content: 'http://120.46.82.82:8080/code/user/toVIPDownloadPage/[[${article.articleId}]]'
                            })
                        }, function () {

                        });
                    }
                });

            } else {
                layer.msg("你还不是VIP，还不能使用此功能")

            }
        }, "json")


    }

    /*]]>*/

</script>
</body>

</html>